<template>
<div class="container">
  <div class="return-button">
    <el-button type="text" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
  </div>
  <!-- 查找框 -->
  <div class="search-box">
    <el-input
      placeholder="请输入器械名查找"
      v-model="searchQuery"
      clearable
      @clear="fetchData"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="fetchDataByElement"
      ></el-button>
    </el-input>
  </div>
  <div class="table-container">
    <el-table
      class="custom-table"
      :data="pagedData"
      style="width: 100%"
      row-key="equipment_id"
    >
      <el-table-column prop="name" label="器械名" width="180"></el-table-column>
      <el-table-column prop="brand" label="品牌" width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="120"></el-table-column>
      <el-table-column prop="purchase_platform" label="购买平台" width="180"></el-table-column>
      <el-table-column prop="quantity" label="数量" width="120"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-delete" @click="deleteEquipment(scope.row.equipment_id)">删除</el-button>
          <el-button type="text" icon="el-icon-edit" @click="editQuantity(scope.row)">修改数量</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderRegistration.length"
      >
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      orderRegistration: [],
      currentPage: 1,
      pageSize: 10,
      pagedData: [],
      currentEquipment: null,
      searchQuery: '', 
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    goBack() {
      this.$router.push('/equipment');
    },
    fetchData() {
      axios.get('/api/equipment/all')
        .then(response => {
          this.orderRegistration = response.data;
          this.pagedData = this.orderRegistration.slice(
            (this.currentPage - 1) * this.pageSize,
            this.currentPage * this.pageSize
          );
        })
        .catch(error => {
          console.error('获取设备列表失败:', error);
          this.$message.error("获取设备列表失败");
        });
    },
    fetchDataByElement() {
    if (!this.searchQuery) {
      this.$message.error("请输入正确的器械名！");
      return;
    }
    axios.get(`/api/equipment/findByName?name=${encodeURIComponent(this.searchQuery)}`)
      .then(response => {
        this.orderRegistration = response.data;
        this.pagedData = this.orderRegistration.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
      })
      .catch(error => {
        console.error('搜索设备失败:', error);
        this.$message.error("搜索设备失败");
      });
  },
    deleteEquipment(id) {
      axios.delete(`/api/equipment/delete/${id}`)
        .then(response => {
          this.fetchData();
          this.$message.success(response.data);
        })
        .catch(error => {
          console.error('删除设备失败:', error);
          this.$message.error("删除设备失败");
        });
    },
    editQuantity(equipment) {
      this.currentEquipment = equipment;
      this.$prompt('请输入新的数量', '修改数量', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        equipment.quantity = parseInt(value, 10);
        axios.post('/api/equipment/update/quantity', equipment)
          .then(response => {
            this.fetchData();
            this.$message.success(response.data);
          })
          .catch(error => {
            console.error('更新设备数量失败:', error);
            this.$message.error("更新设备数量失败");
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f7fa; /* 更改背景颜色 */
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.return-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.search-box {
  margin-bottom: 20px;
  width: 100%;
  max-width: 600px; /* 限制搜索框的最大宽度 */
  text-align: center;
}

.table-container {
  width: 100%;
  max-width: 1200px; /* 调整表格的最大宽度 */
  margin: auto;
}

.custom-table {
  font-size: 16px; /* 调整字体大小 */
}

.custom-table th {
  padding: 8px 0; /* 减少表头的内边距 */
}

.custom-table td {
  padding: 10px 0; /* 减少单元格的内边距 */
}

.custom-table .el-table__body-wrapper {
  background-color: #fff; /* 调整背景颜色 */
}

.custom-table .el-table__row:hover {
  background-color: #ebeef5; /* 调整鼠标悬浮时的背景颜色 */
}

.block {
  margin-top: 20px;
  text-align: center;
}
</style>